<template>
  <div class="download-container">
    <!-- <button v-if="downloadStatus !== 'web'" class="ret" @click="rets">
      返回
    </button>
    <button v-if="downloadStatus === 'web'" class="rets" @click="rets">
      返回
    </button> -->
    <div v-if="downloadStatus === 'web'" class="download-back" />
    <div v-if="downloadStatus === 'web'" class="download-backs" />
    <div v-if="downloadStatus !== 'web'" class="download-backH" />
    <div v-if="downloadStatus !== 'web'" class="download-backHS" />
    <div v-if="downloadStatus === 'web'" class="download">
      <div class="download-left">
        <img src="~@/assets/APP-logo.png" alt="" />
      </div>
      <div class="download-right">
        <h1>建设智慧型的美丽渔场</h1>
        <i></i>
        <div class="download-btn">
          <button class="button" v-for="(item, index) in downloadList" :key="index" :title="item.name === '智慧渔业'
            ? '点击下载智慧渔业APK'
            : '点击下载社会化服务APK'
            " @click="httpHrefTo(item.http)" :class="item.name === '智慧渔业' ? 'MN' : 'ZY'">
            <i class="ICON"></i>
            {{ item.name }}
          </button>
        </div>
        <div style="padding: 20px; text-align: center; color: #ffffff;">
          <div>
            <Qrcode :apkUrl="'http://fishery.ssagroup.cn:9090/base/files/appDownload'"></Qrcode>
          </div>
          扫码下载app
        </div>
      </div>
    </div>
    <div v-if="downloadStatus !== 'web'" class="downloadH">
      <h1>建设智慧型的美丽渔场</h1>
      <img src="~@/assets/APP-logo.png" alt="" />
      <div class="download-right">
        <div class="download-btn">
          <button class="button" v-for="(item, index) in downloadList" :key="index" @click="httpHrefTo(item.http)"
            :class="item.name === '智慧渔业' ? 'MN' : 'ZY'">
            <i class="ICON"></i>
            {{ item.name }}
          </button>
        </div>
        <div>
          <Qrcode></Qrcode>
        </div>
      </div>
    </div>
    <div v-if="downloadStatus === 'web'" class="bottom-box">
      <!-- 版权所有：中科台达(浙江)信息技术有限公司｜ Copyright 2019-2025
      casdelta.com All Right Reserved
      <a class="num-font" href="https://beian.miit.gov.cn" target="view_window"
        >备案号：浙ICP备19034790号-5</a
      > -->
      <img class="bottom-img" src="~@/assets/logo2.png" alt="" />
    </div>
    <!-- <div
      v-if="downloadStatus !== 'web'"
      class="copyright"
      style="font-size: 0.2rem"
    >
      版权所有：中科台达(浙江)信息技术有限公司 <br />
      Copyright 2019-2025 casdelta.com All Right Reserved <br />
      <a class="num-font" href="https://beian.miit.gov.cn" target="view_window"
        >备案号：浙ICP备19034790号-5</a
      >
    </div> -->
  </div>
</template>

<script>

import Qrcode from "@/components/qrcode";
export default {
  name: "download",
  data () {
    return {
      loading: false,
      passwordType: "password",
      redirect: undefined,
      datal_i: {},
      downloadStatus: "",
      downloadList: [
        {
          name: "智慧渔业/社会化服务",
          // img: require(''),
          http: "http://fishery.ssagroup.cn:9090/base/files/appDownload",
        },
        // {
        //   name: "社会化服务",
        //   // img: require(''),
        //   http: "https://gateway.matefarm.net/download/apk?fileName=mateFarm",
        // },
      ],
    };
  },
  watch: {},
  mounted () { },
  created () {
    this.inits();
  },
  components: {
    Qrcode,
  },
  methods: {
    rets () {
      this.$router.push({ name: "index" });
    },
    inits () {
      var system = {
        win: false,
        mac: false,
        xll: false,
        ipad: false,
      };
      this.downloadStatus = "";
      //检测平台
      var p = navigator.platform;
      system.win = p.indexOf("Win") == 0;
      system.mac = p.indexOf("Mac") == 0;
      system.x11 = p == "X11" || p.indexOf("Linux") == 0;
      system.ipad = navigator.userAgent.match(/iPad/i) != null ? true : false;
      //跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面
      if (system.win || system.mac || system.xll || system.ipad) {
        // alert("在PC端上打开的");
        this.downloadStatus = "web";
      } else {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          // alert("在手机端微信上打开的");
          this.downloadStatus = "wx";
        } else {
          // alert("在手机上非微信上打开的");
          this.downloadStatus = "H5";
        }
      }
      // alert(this.downloadStatus)
    },
    httpHrefTo (e) {
      window.location.href = e;
    },
  },
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: rgba(255, 255, 255, 0.602);
$light_gray: #fff;
$cursor: #000;

/* reset element-ui css */

.el-input {
  display: flex;
  align-items: center;
  height: 34px;
  width: 100%;

  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 10px 5px 10px 35px;
    color: $light_gray;
    height: 34px;
    font-size: 16px;
    color: #fff;

    &:-webkit-autofill {
      color: #000 !important;
      font-weight: 700;
      box-shadow: 0 0 0px 10px $bg inset !important;
      -webkit-text-fill-color: $cursor !important;
    }
  }
}

.el-form-item {
  border: 1px solid #ffffff;
  background-color: #f5f5f575;
  margin: 0 0 20px 0;
}

.icon-block {
  display: flex;
  align-items: center;
}
</style>

<style lang="scss" scoped>
$dark_gray: #889aa4;
$light_gray: #eee;

.el-button--primary:hover {
  background-color: #7dd34c;
  border-color: #7dd34c;
}

.el-button--primary {
  background-color: #7dd34c;
  border-color: #7dd34c;
  font-size: 20px;
  font-weight: 700;
  padding: 8px;
  width: 100%;
  margin-bottom: 10px;
  letter-spacing: 10px;
  border: 1px solid #d9d9d9;
}

.LOGO {
  position: absolute;
  z-index: 999;
  left: 60px;
  top: 60px;
  width: 300px;
  height: auto;
}

.download {
  position: relative;
  height: 100vh;
  width: 100vw;
  z-index: 99;
  display: flex;
  //   flex-direction: row;
  //   flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  //   align-content: center;

  .download-left {
    margin-left: 20%;
  }

  // > img {
  // }
  .download-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-left: 5%;
    margin-top: -10%;

    >h1 {
      width: 100%;
      height: 47px;
      font-size: 47px;
      font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
      font-weight: 800;
      color: #ffffff;
      line-height: 59px;
      text-shadow: 0px 2px 2px #000000;

      margin-bottom: 20px;
    }

    >i {
      display: inline-block;
      height: 14px;
      background: #ffffff;
      width: 33%;
      margin-bottom: 24px;
    }

    .download-btn {
      width: 100%;
      display: flex;

      .button {
        // height: 300px;
        // padding: 40px 60px;
        border-radius: 80px;
        margin-right: 60px;
        background: #ffffff;
        display: flex;
        border: 0;
        color: #000;
        font-family: "微软雅黑", "宋体";
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 8px 1px #00000070;

        &.MN {
          //   font-size: 60px;
          //   font-weight: 600;
          // width: 186px;
          height: 51px;
          background: #2d8eeb;
          box-shadow: 0px 3px 6px 1px rgba(0, 51, 88, 0.4);
          border-radius: 34px 34px 34px 34px;
          opacity: 1;
          font-size: 21px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 51px;
          text-align: center;
        }

        &.ZY {
          //   font-size: 60px;
          //   font-weight: 600;
          // width: 186px;
          height: 51px;
          background: #2d8eeb;
          box-shadow: 0px 3px 6px 1px rgba(0, 51, 88, 0.4);
          border-radius: 34px 34px 34px 34px;
          opacity: 1;
          font-size: 21px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 51px;
          text-align: center;
          padding: 0 30px;
          cursor: pointer;
        }

        &.ZY:hover {
          background: #4f8fcc;
          color: #ffffff;

          font-size: 21px;
          font-weight: 600;
        }

        &.MN:hover {
          background: #66a4df;
          color: #ffffff;

          font-size: 21px;
          font-weight: 600;
        }
      }
    }
  }
}

.downloadH {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  align-content: center;

  // .download-left {
  //   margin-left: 10%;
  // }

  >h1 {
    width: 100%;
    font-size: 27px;
    color: #fffff0;
    // margin-top: -800px;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 25px;
    text-shadow: 5px 5px 5px #000;
    letter-spacing: 10px;
  }

  >img {
    margin-top: 15px;
    height: 60%;
  }

  .download-right {
    margin-top: 25px;
    margin-bottom: 5px;
    width: 100%;

    .download-btn {
      width: 100%;
      display: flex;
      justify-content: space-evenly;

      .button {
        // height: 300px;
        // padding: 10px 20px;
        border-radius: 20px;
        // margin-right: 60px;
        background: #ffffff;
        display: flex;
        border: 0;
        justify-content: center;
        color: #000;
        font-family: "微软雅黑" "宋体";
        align-items: center;
        box-shadow: 0px 0px 8px 1px #00000070;

        &.MN {
          font-size: 20px;
          font-weight: 600;
        }

        &.ZY {
          font-size: 20px;
          font-weight: 600;
        }

        &.ZY:hover {
          background: #3dc998;
          color: #ffffff;

          font-size: 20px;
          font-weight: 600;
        }

        &.MN:hover {
          background: #3dc998;
          color: #ffffff;

          font-size: 20px;
          font-weight: 600;
        }
      }
    }
  }
}

.download-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.download-back {
  position: absolute;
  // max-height: 100%;
  height: 100%;
  width: 100%;
  left: -50%;
  min-width: 100%;
  transform: translateX(50%);
  background: url("~@/assets/login/back.jpg") center center no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}

.download-backs {
  position: absolute;
  height: 100%;
  width: 100%;
  left: -50%;
  min-width: 100%;
  transform: translateX(50%);
  background: url("~@/assets/login/back.jpg") center center no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.download-backH {
  position: absolute;
  // max-height: 100%;
  height: 100%;
  width: 100%;
  left: -50%;
  min-width: 100%;
  transform: translateX(50%);
  background: url("~@/assets/login/back.jpg") center center no-repeat;
  background-size: auto 100%;
  z-index: 0;
}

.download-backHS {
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 100%;
  left: -50%;
  transform: translateX(50%);
  background: url("~@/assets/login/back.jpg") center center no-repeat;
  background-size: auto 100%;
  z-index: -1;
}

.login-box {
  position: absolute;
  top: calc(50% - 280px);
  height: 450px;
  width: 580px;
}

.box-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 5px;
  font-size: 73px;
  color: #fff;
  text-shadow: 0 0 5px #313030;
  margin-bottom: 40px;
}

.copyright {
  width: 100%;
  position: absolute;
  bottom: 0px;
  text-align: center;
  color: white;
  line-height: 2;
  font-size: 16px;
  margin-bottom: 0;
  background-color: rgba(32, 3, 4, 0.35);
}

.ret {
  position: absolute;
  z-index: 9999;

  top: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 40px;
  background: #ffffff;
  display: flex;
  border: 0;
  color: #000;
  font-family: "微软雅黑", "宋体";
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 8px 1px #00000070;
  font-size: 16px;

  &:hover {
    background: #3dc998;
    color: #ffffff;
  }
}

.rets {
  position: absolute;
  z-index: 9999;
  top: 50px;
  right: 50px;
  padding: 10px 60px;
  border-radius: 80px;
  margin-right: 60px;
  background: #ffffff;
  display: flex;
  border: 0;
  color: #000;
  font-family: "微软雅黑", "宋体";
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 8px 1px #00000070;
  font-size: 20px;

  &:hover {
    background: #3dc998;
    color: #ffffff;
  }
}

// 这些屏幕宽度是根据我自己需要设置的
@media screen and (min-width: 1366px) {
  .copyright {
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: center;
    color: white;
    line-height: 2;
    font-size: 16px;
    margin-bottom: 0;
    background-color: rgba(32, 3, 4, 0.35);
    display: inline-block;
  }
}

@keyframes upmove {
  0% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
  }
}

@keyframes mymove {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    //  background-position: 100% 0%;
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    //  background-position: 100% 0%;
    transform: scale(1);
    opacity: 1;
  }
}

.num-font {
  color: #fff;
  cursor: pointer;

  &:hover {
    color: #409eff;
  }
}

.bottom-box {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);

  .bottom-img {
    width: 230px;
    height: 50px;
  }
}
</style>
